<template>
  <div class="content">
    <div class="content_center">
      <span>热租车行</span>
      <ul>
        <li v-for="item in citys" :key="item.lid" @click="changeDiv(item.lid,item.cartpyeid)">{{item.cname}}</li>
      </ul>
    </div>
      <!-- 内容展示部分 -->
      <div class="hot_item">
        <div class="hot_img">
          <img src="../assets/img/body/hotcar_banner.png" alt="">
        </div>
          <!-- 使用v-if效果隐藏实现 与上方城市绑定id -->
            <!-- 循环开始 -->
        <div v-for="(arr,index) in arrs" :key="index"  >
        <hot-car-details v-if="count==index" :arr="arr" :data="data"/>
        </div>
        <!-- icons -->
        <hot-item-icons/>
      </div>
  </div>
</template>

<script>
import HotCarDetails from './HotCarDetails.vue';
import HotItemIcons from './HotItemIcons.vue';
  export default {
  components: { HotCarDetails, HotItemIcons },
    data() {
      return {
        data:[],
        count:0,
        citys: [
          {lid:0,cname:"奥迪",cartpyeid:1},
          {lid:1,cname:"奔驰",cartpyeid:4},
          {lid:2,cname:"本田",cartpyeid:5},
          {lid:3,cname:"别克",cartpyeid:6},
          {lid:4,cname:"大众",cartpyeid:3},
          {lid:5,cname:"丰田",cartpyeid:12},
          {lid:6,cname:"更多",cartpyeid:21},
        ],

        arrs:[
          [{cid:0,name:"大众宝来",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:1,name:"大众宝来",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:2,name:"大众宝来",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:4,name:"华晨宝马",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"}],

          [
          {cid:5,name:"华晨宝马",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:6,name:"华晨宝马",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"}],

          [
          {cid:7,name:"法拉利",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:8,name:"保时捷",type:"舒适 | 自动 | 5座",
          price:134,pic:"hotcar01.png"}],

         [{cid:0,name:"大众宝来",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:1,name:"大众宝来",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:2,name:"大众宝来",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:4,name:"华晨宝马",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"}],
                    [
          {cid:7,name:"法拉利",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:8,name:"保时捷",type:"舒适 | 自动 | 5座",
          price:134,pic:"hotcar01.png"}],
                    [
          {cid:7,name:"法拉利",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:8,name:"保时捷",type:"舒适 | 自动 | 5座",
          price:134,pic:"hotcar01.png"}],
                    [
          {cid:7,name:"法拉利",type:"舒适 | 自动 | 5座",
          price:134,pic:"../assets/img/body/hotcar01.png"},
          {cid:8,name:"保时捷",type:"舒适 | 自动 | 5座",
          price:134,pic:"hotcar01.png"}],
          ],
          
      }
    },
    mounted () {
      // console.log(this.arrs[0]);
        this.getdata(1)
    },
    methods: {
      changeDiv(num,carid=1) {
        this.count=num 
        // console.log(carid)
        let params = `Cid=${carid}`
        this.axios.post('/car/getdatacar',params)
        .then(res => {
          // console.log(res)
          this.data=res.data.data
        })
      },
      getdata(carid=1){
        let params = `Cid=${carid}`
        this.axios.post('/car/getdatacar',params)
        .then(res => {
          // console.log(res.data.data)
          this.data=res.data.data
        })
      }
    },

  }
</script>
<style src="../assets/css/indexcontent.css" scoped>

</style>
<style lang="scss" scoped>

</style>